<template>
  <div id='BacInterpretationCodeDictForm'>
    <!-- tab基本信息表单  -->
    <el-scrollbar style='height: 100%'>
      <el-form ref='formRef' :model='formData' label-width='90px' class='form-input-m' inline-message>
        <el-row :gutter='20'>
          <el-col :span='12'>
            <el-form-item label='编码' prop='code'>
              <el-input v-model='formData.code' placeholder='请输入编码' clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label='名称' prop='name'>
              <el-input v-model='formData.name' placeholder='请输入名称' clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter='20'>
          <el-col :span='12'>
            <el-form-item label='标准名' prop='standardName'>
              <el-input v-model='formData.standardName' placeholder='请输入标准名' clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span='12'>
            <el-form-item label='输入码' prop='inputCode'>
              <el-input v-model='formData.inputCode' placeholder='请输入输入码' clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter='20'>
          <el-col :span='12'>
            <el-form-item label='是否静态' prop='isStatic'>
              <el-switch v-model='formData.isStatic' inline-prompt active-text='是' inactive-text='否' active-value='1'
                         inactive-value='0'></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span='12'>
            <el-form-item label='显示颜色' prop='displayColor'>

              <template #default='{ row }'>
                <div style='display: flex'>
                  <el-color-picker v-model='formData.displayColor' :predefine='PredefineColors'></el-color-picker>
                  <el-tag effect='plain' :style="{ backgroundColor: formData.displayColor, marginTop: '2px' }">
                    {{ formData.displayColor }}
                  </el-tag>
                </div>
              </template>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter='20'>
          <el-col :span='12'>
            <el-form-item label='显示顺序' prop='displayOrder'>
              <el-input v-model='formData.displayOrder' type='text' placeholder='请输入显示顺序' clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter='20'>
          <el-col :span='24'>
            <el-form-item>
              <el-button type='primary' @click='saveForm'>保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 配置扩展属性弹框 -->
      <EditExtraProperties ref='EditExtraPropertiesRef' />
    </el-scrollbar>
  </div>

</template>


<script lang='ts' setup>
// 引入组件区==========
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import EditExtraProperties from '@/components/EditExtraProperties.vue'; //配置扩展属性弹框组件


// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 基本信息form表单
let formData = reactive({
  id: '',
  code: '' /*编码*/,
  name: '' /*名称*/,
  standardName: '' /*标准名称*/,
  inputCode: '' /*输入码*/,
  minMeasurement: 0 /*输入码*/,
  maxMeasurement: 1 /*输入码*/,
  isStatic: '0' /*是否静态*/,
  displayColor: '0' /*颜色*/,
  displayOrder: '' /*显示顺序*/
});

let formRef = ref(null); //form表单标记ref

let showLoading = ref(false); //保存按钮
//预定义颜色
const PredefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577'
]);

// 方法定义区 =============
defineExpose({ initPage, clearFormData, initAddPage, addNew });
let repSeq = 0;

function initAddPage(addSeq: number) {
  repSeq = addSeq;
}

function addNew() {
  clearFormData(); // 清空表单
}

// 左侧表格点击当前行传过来的数据
function initPage(row: any) {
  if (row !== null) {
    for (let prop in row) {
      formData[prop] = row[prop];
    }
  }
}

onMounted(() => {

});

//清空数据
function clearFormData() {
  for (let key in formData) {
    formData[key] = '';
  }
  const el: any = proxy.$refs['formRef'];
  el.resetFields(); //重置该表单项，将其值重置为初始值，并移除校验结果
}

// 新增按钮 + 重置按钮
function handleAdd() {
  clearFormData();
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

// 保存按钮
function saveForm() {
  let url = '';
  // 判断添加和编辑接口
  let isAdd = true;
  if (IsEmpty(formData.id)) {
    url = '/lis/bac/base/interpretation-code/dict/add';
  } else {
    isAdd = false;
    url = '/lis/bac/base/interpretation-code/dict/update';
    if(IsEmpty(formData.displayColor)){
      formData.displayColor = '';
    }
  }
  proxy.$http.post(url, formData).then((res: any) => {
    if (res.status.code === 1) {
      if (isAdd) {
        VxeMessage('新增敏感性代码成功', VxeNotifyType.success);
      } else {
        VxeMessage('修改敏感性代码成功', VxeNotifyType.success);
      }
      proxy.$emit('getTableData'); //触发父组件重新获取表格数据
    } else {
      if (isAdd) {
        VxeMessage('新增敏感性代码失败', VxeNotifyType.error);
      } else {
        VxeMessage('修改敏感性代码失败', VxeNotifyType.error);
      }
      proxy.$emit('getTableData'); //触发父组件重新获取表格数据
      return;
    }
  }).catch((err: any) => {
    VxeMessage('新增敏感性代码异常', VxeNotifyType.error);
  });
  showLoading.value = false;
  clearFormData(); //清空数据
}

</script>

<style lang='scss' scoped>
#BacInterpretationCodeDictForm {
  padding: 15px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);

  .el-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
</style>

